<template>
	<div>
		<el-row :gutter="10">
			<el-col :span="5"><el-input v-model="search.customerName" placeholder="请输入要查询的客户姓名"></el-input></el-col>
			<el-col :span="6">
				<el-button type="primary" icon="el-icon-search" @click="searchData()">搜索</el-button>
				<el-button type="primary" icon="el-icon-circle-plus-outline" plain @click="add()">添加</el-button>
			</el-col>
		</el-row>

		<table style="margin: 0px;padding: 0px;">
			<td style="margin: 0px;padding: 0px;">
				<div>
					<el-table :data="result1.tableData" style="width: 100%" highlight-current-row @current-change="tableSelected">
						<el-table-column label="序号" prop="customerId" width="50px"></el-table-column>

						<el-table-column label="姓名" prop="customerName" width="80px"></el-table-column>

						<el-table-column label="性别" prop="customerGender" width="60px"></el-table-column>

						<el-table-column label="年龄" prop="customerAge" width="60px"></el-table-column>

						<el-table-column label="床位" prop="bedId" width="60px"></el-table-column>

						<el-table-column label="护理级别" prop="nurseLevelName" width="90px"></el-table-column>

						<el-table-column label="护理内容" width="100px">
							<template slot-scope="scope">
								<el-button size="mini" @click="set(scope.row)">设置</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination
						style="margin-top:20px;"
						background
						layout="prev, pager, next"
						:total="result1.total"
						:current-page.sync="query1.current"
						:page-size="query1.size"
						@current-change="getData1()"
					></el-pagination>
				</div>
			</td>
			<td style="margin: 0px;padding: 0px; width: 20px;"></td>
			<td style="margin: 0px;padding: 0px;width: 700px;">
				<div class="nursing">
					<el-table :data="result2.tableData" style="width: 100%">
						<el-table-column label="序号" prop="id" width="50px"></el-table-column>

						<el-table-column label="客户姓名" prop="customerName" width="80px"></el-table-column>

						<el-table-column label="护理项目" prop="nursingProject" width="80px"></el-table-column>

						<el-table-column label="护理时间" prop="nursingTime" width="160px"></el-table-column>

						<el-table-column label="数量" prop="number" width="50px"></el-table-column>

						<el-table-column label="护理内容" prop="content" width="100px"></el-table-column>

						<el-table-column label="护理人员" prop="nursingStaff" width="80px"></el-table-column>

						<el-table-column label="操作" width="160px">
							<template slot-scope="scope">
								<el-button size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
								<el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination
						style="margin-top:20px;"
						background
						layout="prev, pager, next"
						:total="result2.total"
						:current-page.sync="query2.current"
						:page-size="query2.size"
						@current-change="getData2()"
					></el-pagination>
				</div>
			</td>
		</table>
		<el-dialog :title="title" :visible.sync="show1"><nurserecordSet :show.sync="show1" @getData="getData2" :editid="editid" :key="showNum"></nurserecordSet></el-dialog>

		<el-dialog :title="title" :visible.sync="show2"><nurserecordAdd :show.sync="show2" @getData="getData2" :editid="editid" :key="showNum"></nurserecordAdd></el-dialog>
	</div>
</template>
<script>
import axios from '@/utils/axiosutils.js';
import nurserecordAdd from './nurserecord_add.vue';
import nurserecordSet from './setting.vue';
export default {
	data() {
		return {
			search: {
				customerName: ''
			},
			query1: {
				customerName: '',
				current: 1,
				size: 6
			},
			query2: {
				customerName: '',
				current: 1,
				size: 6
			},
			result1: {
				tableData: [],
				pages: 0
			},
			result2: {
				tableData: [],
				pages: 0
			},
			arry: [],
			showNum: 0,
			show1: false,
			show2: false,
			editid: null,
			title: ''
		};
	},
	components: {
		nurserecordAdd,
		nurserecordSet
	},
	created() {
		this.getData1();
		this.getData2();
	},
	methods: {
		getData1() {
			axios.get(
				'/customer/list',
				resp => {
					let page = resp.obj;
					this.result1.tableData = page.records;
					this.result1.total = page.total;
				},
				this.query1
			);
		},
		getData2() {
			axios.get(
				'/nurseRecords/list',
				resp => {
					let page = resp.obj;
					this.result2.tableData = page.records;
					this.result2.total = page.total;
				},
				this.query2
			);
		},
		searchData() {
			this.query1.customerName = this.search.customerName;
			this.query1.current = 1;
			this.getData1();
		},
		tableSelected(val) {
			this.query2.customerName = val.customerName;
			this.query2.current = 1;
			this.getData2();
		},
		add() {
			this.showNum++;
			this.title = '添加临时护理项目';
			this.editid = null;
			this.show2 = true;
		},
		handleEdit(id) {
			this.showNum++;
			this.title = '修改护理内容';
			this.editid = id;
			this.show2 = true;
		},
		set(e) {
			this.showNum++;
			this.title = '设置护理内容';
			this.editid = e.customerId;
			this.show1 = true;
			
		},
		handleDelete(id) {
			axios.del(
				'/nurseRecords/del',
				response => {
					this.getData2();
				},
				{ id: id }
			);
		}
	}
};
</script>

<style scoped>
.el-row {
	height: 30px;
}
.el-main {
	background-color: #e9eef3;
	color: #333;
	line-height: 20px !important;
}
</style>
